<template>
<div class="talentInfor">
    <div class="auditMain">
        <button :class="{active:item.islabel}"
                @click="doClick(item,index)"
                v-for="(item,index) in btnlist">
            {{item.label}}
        </button>
        <span>模板更新时间：2019.4.25</span>
    </div>
    <div class="lcontent">
        <router-view/>
    </div>
</div>
</template>

<script>
    export default {
        name: "talentInfor",
        data(){
            return{
                btnlist:[
                    {label:'人才信息',islabel:false},
                    {label:'手动填写',islabel:false}
                ],

            }
        },
        methods:{
            doClick(st,obj) {
                console.log(obj)
                this.btnlist.forEach(item => {
                    item.islabel = false
                })
                this.btnlist[obj].islabel = true
                if (st.label=='人才信息'){
                    this.$router.push('/Personnel/talentInfor/basicDetail')
                }else if (st.label=='手动填写'){
                    this.$router.push('/Personnel/talentInfor/manual')
                }
            },
        }
    }
</script>

<style scoped>
.talentInfor{
    box-sizing: border-box;
    width: 98%;
    margin-left: 1%;
    margin-bottom:20px;
    position: relative;
}
.auditMain > button {
    width:81px;
    height:26px;
    /*margin-top:20px;*/
    margin-bottom:10px;
    border: 1px solid #797979;
    /*background-color: white;*/
}

.auditMain > button:nth-child(1) {
    margin-right: 10px;
    margin-left: 2%;
}
.active {
    background-color: #199ed8;
    color: #333;
}
    .auditMain>span{
        margin-left: 10px;
    }
    .lcontent{
        width: 98%;
        margin-left: 1%;
        background-color: #f2f2f2;
    }
    .ltop{
        font-size: 14px;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 10px;
    }
.ltop>div{
    /*margin-top: 10px;*/
    /*margin-bottom: 10px;*/
}

</style>
